<template>
  <div>
    <!-- 编辑规则按钮 -->
    <el-form-item label="校验规则">
      <el-button link type="primary" :icon="Edit" @click="dialogVisible = true">编辑规则</el-button>
    </el-form-item>

    <!-- 校验规则配置弹窗 -->
    <el-dialog title="校验规则配置" v-model="dialogVisible" width="70%" @close="resetRules">
      <el-table :data="rules" style="width: 100%" border>
        <el-table-column label="规则类型">
          <template #default="{ row }">
            <el-select v-model="row.type" @change="(value) => roleTypeChange(value, row)" placeholder="请选择规则类型">
              <el-option label="必填" value="required"></el-option>
              <el-option label="邮箱" value="email"></el-option>
              <el-option label="URL" value="url"></el-option>
              <el-option label="数字" value="number"></el-option>
              <el-option label="自定义" value="custom"></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="错误提示">
          <template #default="{ row }">
            <el-input v-model="row.message" placeholder="请输入错误提示"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="最小值">
          <template #default="{ row }">
            <el-input-number style="width: 100%;" v-if="row.type === 'number'" v-model="row.min"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="最大值">
          <template #default="{ row }">
            <el-input-number style="width: 100%;" v-if="row.type === 'number'" v-model="row.max"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="自定义正则">
          <template #default="{ row }">
            <el-input v-if="row.type === 'custom'" v-model="row.regex" placeholder="请输入正则表达式"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template #default="{ row, $index }">
            <el-button link type="danger" :icon="Delete" @click="removeRule($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增规则按钮 -->
      <el-button link type="primary" :icon="Plus" class="el-table-button" @click="addRule">新增规则</el-button>

      <!-- 弹窗底部操作 -->
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRules">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { Plus, Delete, Edit } from '@element-plus/icons-vue';

// 接收当前字段配置
const props = defineProps({
  config: {
    type: Object,
    required: true
  }
});

// 弹窗可见性
const dialogVisible = ref(false);

// 初始化规则
const rules = ref([]);

// 添加新的规则
const addRule = () => {
  rules.value.push({
    type: 'required',
    message: '该字段为必填项',
    regex: ''
  });
};

const roleTypeChange = (type, row) => {
  if (type === 'required') {
    row.message = '该字段为必填项';
  } else if (type === 'email') {
    row.message = '请输入正确的邮箱地址';
  } else if (type === 'url') {
    row.message = '请输入正确的链接';
  }
}

// 删除规则
const removeRule = (index) => {
  rules.value.splice(index, 1);
};

// 更新规则
const updateRules = () => {
  const updatedRules = rules.value.map(rule => {
    const newRule = { message: rule.message, trigger: 'blur' };
    if (rule.type === 'required') {
      newRule.required = true;
    } else if (rule.type === 'email') {
      newRule.type = 'email';
    } else if (rule.type === 'url') {
      newRule.type = 'url';
    } else if (rule.type === 'number') {
      newRule.type = 'number';
      newRule.min = rule.min
      newRule.max = rule.max
    } else if (rule.type === 'custom') {
      newRule.pattern = rule.regex;
      newRule.custom = true;
    }
    return newRule;
  });
  // 更新规则
  props.config.rules = updatedRules;
};

// 同步初始化（如果有之前的规则）
watch(
  () => props.config,
  (config) => {
    const fieldRules = props.config.rules || [];
    rules.value = fieldRules.map(rule => {
      const newRule = {
        message: rule.message || '',
        regex: rule.pattern || ''
      };
      if (rule.required) newRule.type = 'required';
      else if (rule.type === 'email') newRule.type = 'email';
      else if (rule.type === 'url') newRule.type = 'url';
      else if (rule.type === 'number') {
        newRule.type = 'number'
        newRule.min = rule.min
        newRule.max = rule.max
      }
      else if (rule.custom) newRule.type = 'custom';
      return newRule;
    });
  },
  { immediate: true }
);

// 保存规则
const saveRules = () => {
  updateRules();
  dialogVisible.value = false;
};

// 重置规则（关闭弹窗时）
const resetRules = () => {
  dialogVisible.value = false;
};
</script>

<style scoped>
.el-table-button {
  margin-top: 10px;
}

.el-dialog {
  width: 60%;
}
</style>